<!DOCTYPE html>
<html>

  <head>
    <title>Landing Page - Baeldung's JS-only SPA Oauth Client</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">

    <!-- Styles -->
    <link rel="stylesheet" href="/landing-page.css">
    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  </head>

  <body>

    <div id="landing-page-container">
      <div class="header-container">
        <div class="title">
          <h1>
            Welcome to the JS-only SPA OAuth Clients using Auth Code with PKCE!
          </h1>
        </div>
        <div class="description">
          We present here three examples of Single Page Applications:
        </div>
      </div>
      <div class="examples-container">
        <a id="simple" href="/pkce-simple/index.html">
          <div class="example">
            <div class="title">
              <h2>The Article's Example SPA</h2>
            </div>
            <div class="description">
              <p>If we're looking for the application that we built together following the article's steps,
                this is our option.</p>
              <p>It has nothing but the most fundamental elements to access secured resources using the
                OAuth2 Auth Code with PKCE Flow</p>
            </div>
          </div>
        </a>
        <a id="step-by-step" href="/pkce-stepbystep/index.html">
          <div class="example">
            <div class="title">
              <h2>The Step-By-Step SPA</h2>
            </div>
            <div class="description">
              <p>We should pick this App if we want to see how the Auth Code with PKCE Flow is carried out in an interactive way.</p>
              <p>
                We'll see in the UI and in the browser console what happens behind the scenes when we request an
                access token.
              </p>
            </div>
          </div>
        </a>
        <a id="real-case" href="/pkce-realcase/index.html">
          <div class="example">
            <div class="title">
              <h2>The Real-Case SPA</h2>
            </div>
            <div class="description">
              <p>
                In this Application we simulate how a real application would work, making use of our custom Resource Server
                with protected endpoints. </p>
              <p>
                Remember to read The
                Readme file for more details.</p>
            </div>
          </div>
        </a>
      </div>
    </div>
  </body>

</html>